<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>主轴上面的对齐方式</title>
    <link rel="stylesheet" type="text/css" href="./css//main.css">
</head>

<body>
    <div>
        <p>
            flex : 元素在主轴上面的对齐方式<br>
            <pre>
justify-content: flex-start|flex-end|center|space-between|space-around
</pre>
            <ul style="list-style-type: none">
                <li>flex-start:项目位于容器的开头</li>
                <li>flex-end:项目位于容器的结尾</li>
                <li>center：项目位于容器的中心</li>
                <li>space-between：弹性项目平均分布在该行上，项目位于各行之间留有空白的容器内</li>
                <li>space-around：弹性项目平均分布在该行上，两边留有一半的间隔空间，项目位于各行之前、之间、之后都留有空白的容器内</li>
            </ul>
            <img src="https://ask.qcloudimg.com/http-save/1006489/l8h27unmce.jpeg?imageView2/2/w/1620" width="600px">
        </p>
    </div>
    <div>
        <p>justify-content:flex-start</p>
        <div class="container flex-start">
            <div>aaaa</div>
            <div>bbbb</div>
            <div>cccc</div>
        </div>
    </div>
    <div>
        <p>justify-content:flex-end</p>
        <div class="container flex-end">
            <div>aaaa</div>
            <div>bbbb</div>
            <div>cccc</div>
        </div>
    </div>
    <div>
        <p>justify-content:center</p>
        <div class="container center">
            <div>aaaa</div>
            <div>bbbb</div>
            <div>cccc</div>
        </div>
    </div>
    <div>
        <p>justify-content:space-between</p>
        <div class="container space-between">
            <div>aaaa</div>
            <div>bbbb</div>
            <div>cccc</div>
        </div>
    </div>
    <div>
        <p>justify-content:space-around</p>
        <div class="container space-around">
            <div>aaaa</div>
            <div>bbbb</div>
            <div>cccc</div>
        </div>
    </div>
</body>
<style>
    .container {
        display: flex;
        width: 200px;
        height: 200px;
        background-color: aqua;
    }

    .flex-start {
        justify-content: flex-start;
    }

    .flex-end {
        justify-content: flex-end;
    }

    .center {
        justify-content: center;
    }

    .space-between {
        justify-content: space-between;
    }

    .space-around {
        justify-content: space-around;
    }

    .flex-start div,
    .flex-end div,
    .center div,
    .space-between div,
    .space-around div {
        width: 50px;
        height: 50px;
        background-color: chocolate;
    }
</style>

</html>